<template>
	<view class="box">
		<!-- <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
			<image @click="fanhui" class="image1" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
			委托记录
			<view class="xinzeng">
				<view class="genduo">
					<span @click.stop="genduoClick()">新增委托</span>
					<view class="administrations" v-if="genduoChage">
						<text class="items" @click.stop="wtxq(1)">
							委托卖房
						</text>
						<text class="items" @click.stop="wtxq(2)">
							委托租房
						</text>
						<text class="items" style="border:none" @click.stop="wtxq(3)">
							委托卖车
						</text>
					</view>
				</view>
			</view>
		</view> -->
		<view class="top heads" :style="'padding-top:' + statusBarHeight1 + 'px;' + paddingR">
			<view class="top-item">
				<view class="" style="width:80rpx;" @click="fanhui">
					<image class="backs" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"  />
				</view>
				<view class="toptitles">
					委托记录
				</view>
				<view class="jubao">
					<view class="genduo">
						<span @click.stop="genduoClick()">新增委托</span>
						<view class="administrations" v-if="genduoChage">
							<text class="items" @click.stop="wtxq(1)">
								委托卖房
							</text>
							<text class="items" @click.stop="wtxq(2)">
								委托租房
							</text>
							<text class="items" style="border:none" @click.stop="wtxq(3)">
								委托卖车
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="center">
			<view class="center_item" v-for="(item,index) in Recommend" :key="index">
				<view class="center_item_title">
					<span class="tagLabel" :style="'background-color:'+(item.businessType==2?'#B461DE':(item.entrustedContent=='委托租房'?'#64B6A8':'#F1A154'))+';'">
						{{item.businessType ==2?'卖车':(item.entrustedContent=='委托租房'?'租房':'卖房')}}
					</span>
					{{item.position}}
				</view>
				<view class="center_item_time">
					<view class="wt_Time">
						委托时间：{{item.createDate}}
					</view>
					<view class="wt_repeal" @click="cancelPowerAttorney(item)">
						撤销委托
					</view>
				</view>
			</view>
			<view v-if="Recommend.length == 0" class="none">
				<image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
				<view>没有更多数据了</view>
			</view>
		</view>
		<uni-popup ref="binds" mode="center" :mask-click="false">
			<view class="binds_frame">
				<view class="binds_frame_c">确定撤销当前委托？</view>
				<view class="binds_frame_b">
					<view class="cancel" @click="jcbdCancel">取消</view>
					<view class="determine" @click="confirmReceipt">确定</view>
				</view>
			</view>
		</uni-popup>
		<uniBall></uniBall>
	</view>
</template>
<script>
	import permision from "@/js_sdk/wa-permission/permission.js"
	//#ifdef H5
	import wxshare from "../../utils/index.js";
	//#endif
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
      		const pr = this.$menuBtnInfo.pr ? `padding-right: ${this.$menuBtnInfo.pr + 5}px` : '';
			return {
        		paddingR: pr,
				imgUrl: this.$imgSrc,
				userInfo: uni.getStorageSync("Pduser"),
				genduoChage:false,
				Recommend:[]
			};
		},
		computed: {
			...mapGetters(["userid", "islogin", "statusBarHeight1", "userinfo"]),
		},
		onLoad() {
			/* #ifdef H5 */
			this.jinzhi();
			/* #endif */
		},
		onShow() {
			this.entrustedRecord()
		},
		mounted() {},
		methods: {
			// 获取委托记录
			entrustedRecord(){	
				this.$myRequest.get("/api/mobile/public/getMyDelegationSale",{
					userId:this.userInfo.id
				}).then(res => {
					if (res.code == 200) {
						this.Recommend=res.delegationSale.pageList
					}
				});
			},
			// 撤销委托
			cancelPowerAttorney(item){
				this.$refs.binds.open()
				this.cancelPowerAttorneyItem = item
			},
			jcbdCancel(){
				this.$refs.binds.close()
			},
			confirmReceipt(){
				this.$myRequest.post("/api/mobile/public/revocationDelegation", {
					userId:this.userInfo.id,
					id:this.cancelPowerAttorneyItem.id
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
						setTimeout(()=>{
							this.jcbdCancel()
							this.entrustedRecord()
						},500)
					}
				});
			},
			genduoClick(){
				this.genduoChage=!this.genduoChage
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				});
			},
			wtxq(index){
				this.genduoChage=false
				uni.navigateTo({
					url:"/pages_owner/my/commissionRentalDetails?index="+index
				})
			},
			jinzhi() {
				let _this = this;
				let param = window.location.href.split("#")[0];
				uni.request({
					method: "post",
					data: {
						url: param
					},
					header: {
						"content-type": "application/x-www-form-urlencoded",
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
					success(re) {
						_this.jinzhifx(re.data);
					},
				});
			},
			jinzhifx(data) {
				wxshare.config({
					debug: false, //是否打开调试
					appId: data.appId, // 公众号的唯一标识
					timestamp: data.timestamp, // 生成签名的时间戳
					nonceStr: data.nonce, // ，生成签名的随机串
					signature: data.signature, // 签名
					jsApiList: ["hideMenuItems"],
				});
				// 禁止分享
				wxshare.hideMenuItems({
					// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
					menuList: [
						"menuItem:share:appMessage",
						"menuItem:share:timeline",
						"menuItem:share:timeline",
						"menuItem:share:qq",
						"menuItem:favorite",
						"menuItem:share:QZone",
						"menuItem:openWithSafari",
					],
				});
			},

		},
	};
</script>
<style lang="less" scoped>
	.tou {
		position: relative;
		width: 100%;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		color: #fff;
		background-color: #64b6a8;

		.image1 {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			// top: 116rpx;
			left: 30rpx;
		}
	}
	.heads{
		padding: 0 5%;
		width: 100%;
		box-sizing: border-box;
		height: auto;
		.top-item {
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.backs{
			width: 32rpx;
			height: 32rpx;
			bottom: 0 !important;
		}
		.toptitles{
			font-size: 18px;
			color: #fff;
			text-align: center;
		}
		.jubao{
			text-align: right;
			.genduo{
				color: #fff;
				position: relative;
				.administrations{
					width: 180rpx;
					height: 280rpx;
					background-color: #fff;
					position: absolute;
					right: 0rpx;
					bottom: -300rpx;
					box-shadow: 0px 0px 20px 1px #D0D0D0;
					z-index: 100;
					padding: 0 32rpx;
					display: flex;
					flex-direction: column;
					.items{
						height: 94rpx;
						color: #5A5E66;
						font-size: 28rpx;
						border-bottom: 1px solid #E0E0E0;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					&::before{
						content: '';
						display: inline-block;
						border-left: 24rpx solid transparent;
						border-right: 20rpx solid transparent;
						border-bottom: 24rpx solid #fff;
						position: absolute;
						right:12rpx;
						top: -22rpx;
					}
				}
			}
		}
	}
	page{
		background-color: #fff;
	}
	.box {
		min-height: 100vh;
		background-color: #fff;
	}
	.center{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 30rpx;
		.center_item{
			border: 1px solid #64b6a8;
			width: 680rpx;
			// height: 240rpx;
			border-radius: 20rpx;
			padding:30rpx 40rpx;
			margin-bottom: 40rpx;
			.center_item_title{
				font-size: 40rpx;
				color: #333333;
				line-height: 44rpx;
				word-break: break-all;
				.tagLabel{
					vertical-align: top;
					color: #fff;
					font-size: 24rpx;
					text-align: center;
					width: 106rpx;
					margin-right: 10rpx;
					padding: 2rpx 6rpx;
					border-radius: 4rpx;
				}
			}
			.center_item_time{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				margin-top: 40rpx;
				.wt_Time{
					
				}
				.wt_repeal{
					width: 160rpx;
					height: 60rpx;
					background-color: #64b6a8;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 10rpx;
					font-size: 28rpx;
				}
			}
		}
	}
	.xinzeng {
		position: absolute;
		bottom: 2px !important;
		color: #fff;
		font-size: 14px;
		// #ifdef MP-WEIXIN
		right: 200rpx;
	
		// #endif
		// #ifndef MP-WEIXIN
		right: 20rpx;
		// #endif
		display: flex;
		align-items: center;
		image{
			width: 54rpx;
			height: 60rpx;
		}
	}
	.genduo{
		position: relative;
		.administrations{
			width: 180rpx;
			height: 280rpx;
			background-color: #fff;
			position: absolute;
			right: 0rpx;
			bottom: -290rpx;
			box-shadow: 0px 0px 20px 1px #D0D0D0;
			z-index: 100;
			padding: 0 32rpx;
			display: flex;
			flex-direction: column;
			.items{
				height: 94rpx;
				color: #5A5E66;
				font-size: 28rpx;
				border-bottom: 1px solid #E0E0E0;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			&::before{
				content: '';
				display: inline-block;
				border-left: 24rpx solid transparent;
				border-right: 20rpx solid transparent;
				border-bottom: 24rpx solid #fff;
				position: absolute;
				right:12rpx;
				top: -22rpx;
			}
		}
	}
	.down {
	  height: 60rpx;
	  line-height: 60rpx;
	  // border-top: 2rpx solid #d0d0d0;
	  text-align: center;
	}
	
	.none {
	  text-align: center;
	
	  image {
	    width: 430rpx;
	    margin-bottom: 16rpx;
	  }
	
	  view {
	    height: 40rpx;
	    line-height: 40rpx;
	    color: #666;
	  }
	}
	.binds_frame{
		width: 600rpx;
		background-color: #FFFFFF;
		padding-bottom: 50rpx;
		padding-top: 50rpx;
		border-radius: 10rpx;
		text-align: center;
		.binds_frame_c{
			width: 500rpx;
			margin: 0 auto;
			font-size: 30rpx;
			font-weight: 400;
			color: #000000;
			margin-bottom: 50rpx;
		}
		.binds_frame_b{
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			.cancel{
				width: 160rpx;
				height: 60rpx;
				background-color: #FFFFFF;
				border-radius: 38rpx;
				border: 1px solid #64B6A8;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #64B6A8;
			}
			.determine{
				width: 160rpx;
				height: 60rpx;
				background-color: #64B6A8;
				border-radius: 38rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>
